<ul id="alipay-red-bao-ul" class="uk-navbar-nav uk-visible-large uk-hidden">
    <li class="uk-parent" data-uk-dropdown="{'remaintime':200}">
        <a id="alipay-red-bao" v-on:mouseover="view()"></a>
        <div id="alipay-red-bao-img" class="uk-dropdown uk-dropdown-small" style="width:240px;"></div>
    </li>
</ul>
<style>
    .red-point{
        position: relative;
    }
    .red-point::before{
        content: " ";
        border: 4px solid red;
        border-radius:4px;
        position: absolute;
        z-index: 1000;
        right: 0%;
        margin-right: 8px;
        margin-top: 8px;
    }
</style>
<script>

    $('#alipay-red-bao-img').html('<img src="{{ site.url-cdn0 }}/images/alipay-red-bao.png">')
    $('#alipay-red-bao').text('支付宝红包')
    var vm_alipay_red_bao = new Vue({
        el: '#alipay-red-bao-ul',
        mounted: function () {
            if (new Date().setHours(0,0,0,0) < localStorage.alipayRedBaoViewTime
                && localStorage.alipayRedBaoViewTime < new Date().setHours(23,59,59,0)) {
                $('#alipay-red-bao').removeClass('red-point')
            } else {
                $('#alipay-red-bao').addClass('red-point')
            }
        },
        methods: {
            view: function() {
                localStorage.alipayRedBaoViewTime = new Date().getTime()
                $('#alipay-red-bao').removeClass('red-point')
            },
        }
    })
</script>